<template>
	<div class="requiredReadingWrapClass">
		<div class="top-title top-bar is-flex">
			<div class="left-part">
				<div class="logo">
					<img src="../../assets/images/u19.png" alt="">
				</div>
				<div class="system-name">
					{{systemName}}
				</div>
			</div>
		</div>
		<div class="centerBox">
			<div class="mainWrap">
				<div class="mainTitle">考前必读</div>
				<ul class="userInfoClass" :class="{ userInfo: isWechat }">
					<li>学校名称：{{ formData.schoolName }}</li>
					<li>学校队号：{{ formData.teamNumber }}</li>
					<li>身份证号：{{ formData.stuIdCard }}</li>
					<li>考试姓名：{{ formData.stuName }}</li>
				</ul>
				<ul class="requiredContentClass" :class="{ requiredContent: isWechat }">
					<li>
						1、考生进入考场后，不得大声喧哗，未经监考人员允许不得擅自离开考场或座位。
					</li>
					<li>
						2、考场严禁交头接耳、严禁抄袭，一经发现，即取消考试资格，有疑问或需求向考官示意。
					</li>
					<li>
						3、严禁将任何资料及各类通讯工具等带入考场。
					</li>
					<li>
						4、如仪器设备出现故障，或发生意外等突发事件时应及时向监考老师报告并启用备用机。
					</li>
					<li>
						5、进入考试后，系统自动倒计时，考试时间截止时未交卷，系统自动交卷。
					</li>
					<li>
						6、考试后，请勿离开考试界面，否则，视为自动交卷。
					</li>
				</ul>
				<el-button type="primary" size="large" class="btnClass" @click="goExam">已阅读并进入考核
				</el-button>
			</div>
		</div>
		<div class="footerWrap">技术支持：广州玉才科技有限公司</div>
	</div>
</template>

<script setup lang="ts">
	import { ref } from "vue"
	import router from "@/router";
	// import { openCenteredWindow } from "@/utils/examOpenWindow"
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	defineOptions({
		name: "RequiredReading",
		inheritAttrs: false,
	});
	let isWechat = ref(false)
	//系统名称
	let systemName = ref()
	systemName.value = sessionStorage.getItem('systemName')

	const formData = reactive<any>({
		id: "",
		schoolName: "",
		stuIdCard: "",
		stuName: "",
		stuPhone: "",
		teamNumber: "",
	});
	//跳转考试
	const goExam = () => {
		// openCenteredWindow('/#/exam', 1400, 800);
		router.replace({ path: "/exam" });
	};





	const handleBeforeUnload = (event : any) => {
		if (document.hasFocus()) {
			// 这里的返回字符串会出现在警告框中
			event.returnValue = '你确定要离开这个页面吗？';
		}
	}

	onMounted(() => {
		// 禁用最小化
		window.addEventListener('beforeunload', handleBeforeUnload)

		formData.id = sessionStorage.getItem("id");
		formData.schoolName = sessionStorage.getItem("schoolName");
		formData.stuIdCard = sessionStorage.getItem("stuIdCard");
		formData.stuName = sessionStorage.getItem("stuName");
		formData.stuPhone = sessionStorage.getItem("stuPhone");
		formData.teamNumber = sessionStorage.getItem("teamNumber");

		//判断浏览器
		const isWeixinBrowser = /micromessenger/i.test(navigator.userAgent);
		if (isWeixinBrowser) {
			// ElMessage('当前浏览器是微信浏览器')
			isWechat.value = true;
		} else {
			isWechat.value = false;
		}
	});
</script>

<style lang="scss" scoped>
	.requiredReadingWrapClass {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.headTitle {

		height: 100px;
		background: #0530de;
		color: #fff;
		line-height: 100px;
		text-align: center;

		.logoWrap {
			border-radius: 10px;
			float: left;
			width: 80px;
			height: 80px;
			background-image: url("../../assets/images/u19.png");
			background-size: cover;
			margin: 10px 0 0 20px;
		}

		.titleWarp {
			margin: 0;
		}
	}

	.centerBox {
		flex: 1;
		width: 100%;
		align-items: center;
		justify-content: center;
		display: flex;
		padding: 10px;
	}

	.mainWrap {
		width: auto;
		border: 1px solid #efefef;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 0 4px #d6e2f5;
		position: static;
		transform: translate(0, 0);

		.mainTitle {
			height: 40px;
			line-height: 40px;
			text-align: center;
			font-size: 18px;
			font-weight: bold;
			color: #fff;
			background: #2474f3;
			margin-bottom: 20px;
		}

		.userInfoClass {
			overflow: hidden;
		}

		.userInfoClass li {
			float: left;
			width: 50%;
			padding-left: 40px;
			font-weight: 700;
			font-style: normal;
			font-size: 18px;
			color: #2474f3;
			line-height: 36px;
		}

		.userInfo li {
			width: 100%;
			padding-left: 20px;
		}

		.requiredContentClass {
			margin: 14px 0 70px 58px;
			font-size: 16px;
			line-height: 36px;
		}

		.requiredContent {
			margin: 14px 0 70px 14px;
		}
	}

	.btnClass {
		width: 186px;
		margin: 0 auto 40px;
		display: block;
		background-color: #487bfb;
		font-size: 16px;
	}

	.footerWrap {
		position: static;
		// bottom: 30px;
		// left: 50%;
		transform: translate(0, 0);
		height: 50px;
		width: 100%;
		text-align: center;
		line-height: 50px;
	}

	.top-title {
		width: 100%;
		display: flex;
		height: 90px;
		padding: 0 10px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border: 1px solid #dcdcdc;
		border-left: 0;
		border-right: 0;
		background-color: rgb(36, 116, 243);

		.left-part {
			display: flex;
			flex-direction: row;
			flex: 1;


			.logo {
				display: flex;
				align-items: center;
				padding-right: 15px;

				img {
					width: 60px;
					height: 60px;

				}
			}



			.system-name {
				font-size: 22px;
				font-weight: bold;
				color: #fff;

				display: flex;
				align-items: center;
			}
		}
	}
</style>